<script setup lang="ts">
import {reactive, ref} from 'vue'
import axios from 'axios'  //导入axios工具
import {ElMessage} from 'element-plus'
import {genFileId} from 'element-plus'
import {Share, Edit, UploadFilled, Upload} from '@element-plus/icons-vue'
import type {UploadProps, UploadRawFile, UploadInstance} from 'element-plus'

// 在flask中处理该数据的路由
// const formatPath: string = 'http://localhost:2222/format_doc'
const formatPath: string = 'http://localhost:5000/format_doc'
// const downPath: string = 'http://localhost:2222/down_zip'
const downPath: string = 'http://localhost:5000/down_zip'

// el封装上传列表
const upload = ref<UploadInstance>()
// @生成数据 回传文件
const uploadReport: any = (file: any) => {
  let formData = new FormData()
  formData.append('file_data', file.file)
  // post方法 文件太大 这里上传文件的路径
  loading.value = true
  axios.post(formatPath, formData).then((res: any) => {
    if (res.data.code === 200) {
      activeField.value = '1'  // 通过赋值的方式 打开指定的折叠区域
      displayReportInfo(res.data.base)  // 展示生成的数据
      ElMessage.success('文件上传成功')
      upload.value!.clearFiles()  // 清空上传列表
      loading.value = false
    } else {
      ElMessage.warning(res.data.msg)
      upload.value!.clearFiles()
      loading.value = false
    }
  }).catch((error: any) => {
    ElMessage.warning('文件上传失败')
    loading.value = false
  })
}
// @显示报告信息
let displayReportInfo: any = (data: any) => {
  for (const [key, value] of Object.entries(keysMap)) {
    for (const [k, v] of Object.entries(value)) {
      if (data[v] !== undefined) {
        field_map[key][k] = data[v]  // 使用[]的方式获取对象属性名称
      }
    }
  }
}
// @获取页面信息
let getWebInfo = () => {
  let dataForm = new FormData()
  let workContent
  for (const [key, value] of Object.entries(keysMap)) {
    for (const [k, v] of Object.entries(value)) {
      if (field_map[key][k] instanceof Array) {
        workContent = field_map[key][k].join(',')  // 拼接select元素内容 []=''
        dataForm.append(v, workContent)
      } else {
        dataForm.append(v, field_map[key][k])
      }
    }
  }
  if (dataForm.get('$测评成员二$') === '') {
    dataForm.set('$测评成员二组别$','')
  }
  if (dataForm.get('$测评成员三$') === '') {
    dataForm.set('$测评成员三组别$','')
  }
  return dataForm
}
// 关键字映射对象
let keysMap = {
  pjInfo: {
    pjNum: '$项目编号$', fiNum: '$备案证明编号$', pjName: '$被测对象$', pjGrade: '$安全保护等级$',
    extension: '$扩展要求$', surveyStart: '$测评准备起始时间$', surveyEnd: '$测评准备结束时间$',
    planStart: '$方案编制起始时间$', planEnd: '$方案编制结束时间$',
    conductStart: '$现场实施起始时间$', conductEnd: '$现场实施结束时间$',
    reportStart: '$报告编制起始时间$', reportEnd: '$报告编制结束时间$',
  },
  cusInfo: {
    customer: '$被测单位$', cusLocation: '$被测单位地址$', cusZipCode: '$被测单位邮编$',
    cusLeader: '$被测单位负责人姓名$', cusLeaderContact: '$被测单位负责人联系电话$',
    cusContact: '$被测单位联系人姓名$', cusConPost: '$被测单位联系人职务$',
    cusConDepartment: '$被测单位联系人部门$', cusConTele: '$被测单位联系人办公电话$',
    cusConMobile: '$被测单位联系人移动电话$', cusConEmail: '$被测单位联系人电子邮件$',
  },
  evalInfo: {
    evaluator: '$测评单位$', evalCode: '$测评单位机构代码$', evalLocation: '$测评单位地址$',
    evalZipCode: '$测评单位邮编$', evalContact: '$测评单位联系人姓名$',
    evalConPost: '$测评单位联系人职务$', evalConDepartment: '$测评单位联系人部门$',
    evalConTele: '$测评单位联系人办公电话$', evalConMobile: '$测评单位联系人移动电话$',
    evalConEmail: '$测评单位联系人电子邮件$', evalConWork: '$测评成员一测评内容$',
    evalMenberTwo: '$测评成员二$', evalMenTwoLevel: '$测评成员二级别$', evalMenTwoContact: '$测评成员二联系方式$',
    evalMenTwoGroup: '$测评成员二组别$', evalMenTwoWork: '$测评成员二测评内容$',
    evalMenberThree: '$测评成员三$', evalMenThreeLevel: '$测评成员三级别$', evalMenThreeContact: '$测评成员三联系方式$',
    evalMenThreeGroup: '$测评成员三组别$', evalMenThreeWork: '$测评成员三测评内容$',
  }
}
// @保存文档
const downloadDoc = () => {
  // let time = new Date()  // 获取当前计算机时间
  loading.value = true  // 开始加载动画
  activeField.value = ''  // 关闭折叠
  axios({
    method: 'POST',
    url: downPath,
    data: getWebInfo(),
    responseType: 'blob'  // 请求响应的数据类型不能省略 否则zip保存无法打开
  }).then(res => {
    if (res.data.type === 'application/json') {  // 判断返回的blob数据的类型
      let reader = new FileReader()
      reader.readAsText(res.data, 'utf-8')
      reader.onload = (e) => {  // 获取数据上传后的返回值 否则result为null
        ElMessage.warning(eval("(" + reader.result + ")").msg)  // 将string转成json
      }
      loading.value = false  // 结束加载动画
    } else {
      let blob = new Blob([res.data], {type: 'application/zip'})
      let contentDisposition = res.headers['content-disposition']
      console.log(contentDisposition)
      let pattern = new RegExp("UTF-8''([^;]+\\.[^\\.;]+);*")  // 字符串切割
      let result = pattern.exec(contentDisposition)
      // 使用decodeURI对名字进行解码
      let fileName
      if (result === null) {
        ElMessage.warning('下载数据响应失败')
      } else {
        fileName = decodeURI(result[1])
        let downloadElement = document.createElement('a')
        // 创建下载的链接
        let href = window.URL.createObjectURL(blob)
        downloadElement.style.display = 'none'
        downloadElement.href = href
        // 下载后文件名
        downloadElement.download = fileName
        document.body.appendChild(downloadElement)
        // 点击下载
        downloadElement.click()
        // 下载完成移除元素
        document.body.removeChild(downloadElement)
        // 释放掉blob对象
        window.URL.revokeObjectURL(href)
        // ElMessage.success('下载成功')
      }
      loading.value = false  // 结束加载动画
    }
  }).catch(error => {
    console.log(error)
    ElMessage.warning('下载失败')
    loading.value = false  // 结束加载动画
  })
}
// @超过限定上传数
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
// @获取已上传文件的信息 可用于修改错误刷新获取信息
const getExistReportInfo = () => {
  let fileClass = 'el-upload-list__item-status-label'  // 文件上传后的显示标签class
  let uploadFiles = document.getElementsByClassName(fileClass).length
  if (uploadFiles === 1) {
    upload.value!.submit()  // 存在class标签元素内容
  } else {
    loading.value = true
    axios.get(formatPath).then(res => {
      if (res.data.code === 200) {  // 先请求判断后台是否有报告
        activeField.value = '1'  // 通过赋值的方式 打开指定的折叠区域
        displayReportInfo(res.data.base)  // 展示生成的数据
        ElMessage.success('数据已重新加载')
        loading.value = false
      } else if (res.data.code === 206) {
        activeField.value = '1'
        displayReportInfo(res.data.base)
        ElMessage.success(res.data.msg)
        loading.value = false
      } else {
        ElMessage.warning('请先上传文件')
        loading.value = false
      }
    }).catch(error => {
      ElMessage.warning('请求已存在文件的方法失败')
      loading.value = false
    })
  }
}
// @生成数据 回传文件/从后台已上传的文件中获取数据
const submitUpload = () => {
  getExistReportInfo()  // 提交文件前预处理
}
// 基本信息响应数据
const pjInfo = reactive({
  pjNum: '', fiNum: '', pjName: '', pjGrade: '', extension: '',
  surveyStart: '', surveyEnd: '', planStart: '', planEnd: '',
  conductStart: '', conductEnd: '', reportStart: '', reportEnd: ''
})
// 被测单位响应数据
const cusInfo = reactive({
  customer: '', cusLocation: '', cusZipCode: '',
  cusLeader: '', cusLeaderContact: '',
  cusContact: '', cusConPost: '', cusConDepartment: '', cusConTele: '', cusConMobile: '', cusConEmail: ''
})
// 测评单位响应数据
const evalInfo = reactive({
  evaluator: '',
  evalCode: '',
  evalLocation: '',
  evalZipCode: '',
  evalContact: '',
  evalConPost: '',
  evalConDepartment: '',
  evalConTele: '',
  evalConMobile: '',
  evalConEmail: '',
  evalConWork: [],
  evalMenberTwo: '',
  evalMenTwoLevel: '',
  evalMenTwoContact: '',
  evalMenTwoGroup: '测评师二',
  evalMenTwoWork: [],
  evalMenberThree: '',
  evalMenThreeLevel: '',
  evalMenThreeContact: '',
  evalMenThreeGroup: '测评师三',
  evalMenThreeWork: [],
})
// 区域的对象
let field_map = {
  pjInfo: pjInfo,
  cusInfo: cusInfo,
  evalInfo: evalInfo
}
// 设置活跃的折叠区
let activeField = ref('')  // 为空则默认全部折叠
// 设置懒加载
let loading = ref(false)  // true 开启加载动画
// 测评内容选择器
let selectValue = ref([])  // 默认为空
// 测评内容的选项
const selectOption = [
  {
    value: '沟通协调',
    label: '沟通协调'
  },
  {
    value: '工具扫描',
    label: '工具扫描'
  },
  {
    value: '过程文档整理',
    label: '过程文档整理'
  },
  {
    value: '安全物理环境',
    label: '安全物理环境'
  },
  {
    value: '安全通信网络',
    label: '安全通信网络'
  },
  {
    value: '安全区域边界',
    label: '安全区域边界'
  },
  {
    value: '安全计算环境',
    label: '安全计算环境'
  },
  {
    value: '安全管理中心',
    label: '安全管理中心'
  },
  {
    value: '安全管理',
    label: '安全管理'
  },
]
// @ 选择器的处理
const handleSelect: any = (selectValue: any) => {
  // console.log(selectValue)
}
</script>

<template>
  <div class="common-layout">
    <el-container v-loading="loading" element-loading-text="数据正在处理中 请稍后 . . .">
      <el-header>
        <div style="text-align: -webkit-center;margin-top: 20px;">
          <span class="head-span">欢迎使用 项目归档小助手</span>
          <span class="head-span" style="margin-left: 30px;">ଘ(੭ˊᵕˋ)੭</span>
        </div>
      </el-header>
      <el-main>
        <el-row style="text-align: right">
          <el-col :span="24">
            <div>
              <el-upload class="upload-doc" :limit="1" accept=".docx"
                         :http-request="uploadReport" ref="upload" :on-exceed="handleExceed"
                         :auto-upload="false">
                <template #trigger>
                  <el-button class="upreport-btn" type="primary">上传报告</el-button>
                </template>
                <el-button style="margin-left:30px;margin-right:10px"
                           type="success" @click="submitUpload">
                  生成数据
                </el-button>
                <el-button style="margin-right: 20px" @click="downloadDoc" :icon="Edit">
                  保存文档
                </el-button>
              </el-upload>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="24">
            <el-collapse v-model="activeField" accordion>
              <el-collapse-item title="基本信息" name="1">
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">项目编号 :</span>
                        <el-input v-model="pjInfo.pjNum" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">备案编号 :</span>
                        <el-input v-model="pjInfo.fiNum" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">系统名称 :</span>
                        <el-input v-model="pjInfo.pjName" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">系统等级 :</span>
                        <el-input v-model="pjInfo.pjGrade" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">扩展要求 :</span>
                        <el-input v-model="pjInfo.extension" class="base-inp"/>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                <el-row>
                  <el-col :span="24">
                    <div>
                      <span class="roll-span">测评过程</span>
                    </div>
                  </el-col>
                </el-row>
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">调研起始 :</span>
                      <el-input v-model="pjInfo.surveyStart" class="base-inp"/>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">调研结束 :</span>
                      <el-input v-model="pjInfo.surveyEnd" class="base-inp"/>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">方案起始 :</span>
                      <el-input v-model="pjInfo.planStart" class="base-inp"/>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">方案结束 :</span>
                      <el-input v-model="pjInfo.planEnd" class="base-inp"/>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">实施起始 :</span>
                      <el-input v-model="pjInfo.conductStart" class="base-inp"/>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">实施结束 :</span>
                      <el-input v-model="pjInfo.conductEnd" class="base-inp"/>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">报告起始 :</span>
                      <el-input v-model="pjInfo.reportStart" class="base-inp"/>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <span class="base-span">报告结束 :</span>
                      <el-input v-model="pjInfo.reportEnd" class="base-inp"/>
                    </el-col>
                  </el-row>
                </el-card>
              </el-collapse-item>
              <el-collapse-item title="被测单位" name="2">
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">被测单位 :</span>
                        <el-input v-model="cusInfo.customer" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">单位地址 :</span>
                        <el-input v-model="cusInfo.cusLocation" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">单位邮编 :</span>
                        <el-input v-model="cusInfo.cusZipCode" class="base-inp"/>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                <el-row>
                  <el-col :span="24">
                    <div>
                      <span class="roll-span">负责人信息</span>
                    </div>
                  </el-col>
                </el-row>
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">负责人 :</span>
                        <el-input v-model="cusInfo.cusLeader" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">联系方式 :</span>
                        <el-input v-model="cusInfo.cusLeaderContact" class="base-inp"/>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                <el-row>
                  <el-col :span="24">
                    <div>
                      <span class="roll-span">联系人信息</span>
                    </div>
                  </el-col>
                </el-row>
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">联系人 :</span>
                        <el-input v-model="cusInfo.cusContact" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">职务/职称 :</span>
                        <el-input v-model="cusInfo.cusConPost" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">部门 :</span>
                        <el-input v-model="cusInfo.cusConDepartment" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">办公电话 :</span>
                        <el-input v-model="cusInfo.cusConTele" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">移动电话 :</span>
                        <el-input v-model="cusInfo.cusConMobile" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">电子邮箱 :</span>
                        <el-input v-model="cusInfo.cusConEmail" class="base-inp"/>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-collapse-item>
              <el-collapse-item title="测评单位" name="3">
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">测评单位 :</span>
                        <el-input v-model="evalInfo.evaluator" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">机构代码 :</span>
                        <el-input v-model="evalInfo.evalCode" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">单位地址 :</span>
                        <el-input v-model="evalInfo.evalLocation" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">单位邮编 :</span>
                        <el-input v-model="evalInfo.evalZipCode" class="base-inp"/>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                <el-row>
                  <el-col :span="24">
                    <div>
                      <span class="roll-span">联系人(组长)(成员一)信息</span>
                    </div>
                  </el-col>
                </el-row>
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">联系人 :</span>
                        <el-input v-model="evalInfo.evalContact" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">职务/职称 :</span>
                        <el-input v-model="evalInfo.evalConPost" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">部门 :</span>
                        <el-input v-model="evalInfo.evalConDepartment" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">办公电话 :</span>
                        <el-input v-model="evalInfo.evalConTele" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">移动电话 :</span>
                        <el-input v-model="evalInfo.evalConMobile" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">电子邮箱 :</span>
                        <el-input v-model="evalInfo.evalConEmail" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">工作内容 :</span>
                        <el-select
                            v-model="evalInfo.evalConWork"
                            multiple
                            placeholder="Select">
                          <el-option
                              v-for="item in selectOption"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"/>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                <el-row>
                  <el-col :span="24">
                    <div>
                      <span class="roll-span">成员二信息</span>
                    </div>
                  </el-col>
                </el-row>
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">成员二 :</span>
                        <el-input v-model="evalInfo.evalMenberTwo" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">测评师级别 :</span>
                        <el-input v-model="evalInfo.evalMenTwoLevel" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">联系方式 :</span>
                        <el-input v-model="evalInfo.evalMenTwoContact" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">测评师组别 :</span>
                        <el-input v-model="evalInfo.evalMenTwoGroup" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">测评内容 :</span>
                        <el-select
                            v-model="evalInfo.evalMenTwoWork"
                            multiple
                            placeholder="Select">
                          <el-option
                              v-for="item in selectOption"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"/>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                <el-row>
                  <el-col :span="24">
                    <div>
                      <span class="roll-span">成员三信息</span>
                    </div>
                  </el-col>
                </el-row>
                <el-card class="box-card">
                  <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">成员三 :</span>
                        <el-input v-model="evalInfo.evalMenberThree" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">测评师级别 :</span>
                        <el-input v-model="evalInfo.evalMenThreeLevel" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">联系方式 :</span>
                        <el-input v-model="evalInfo.evalMenThreeContact" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">测评师组别 :</span>
                        <el-input v-model="evalInfo.evalMenThreeGroup" class="base-inp"/>
                      </div>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <div>
                        <span class="base-span">测评内容 :</span>
                        <el-select
                            v-model="evalInfo.evalMenThreeWork"
                            multiple
                            placeholder="Select">
                          <el-option
                              v-for="item in selectOption"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"/>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>
        <el-backtop :right="10" :bottom="50">
          <div class="back-top">
            返回顶部
          </div>
        </el-backtop>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>

.head-span {
  font-size: 22px;
}

.box-card {
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: transparent;
  text-align: center;
}

.base-span {
  font-size: 14px;
  width: 80px;
  text-align: right;
  justify-content: right;
  align-items: center;
  display: inline-block;
}

.roll-span {
  font-size: 18px;
  color: #2a598a;
  margin-left: 20px;
}

.base-inp {
  width: 240px;
  margin-left: 10px;
  margin-bottom: 10px;
}

/deep/ .el-select {
  width: 240px;
  margin-left: 10px;
  margin-bottom: 10px;
}


/deep/ .el-backtop {
  width: 55px;
  height: 55px;

}

.back-top {
  height: 100%;
  width: 100%;
  font-size: 12px;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 55px;
  color: #a77730;
  border-radius: 50%;
}

.back-top:hover {
  color: #66b1ff;
}

/deep/ .el-collapse-item__header {
  font-size: 20px;
  color: #3375b9;
  margin-top: 5px;
}

/deep/ .collapse-title {
  flex: 1 0 90%;
  order: 1;
}

/deep/ .el-upload {
  margin-bottom: 5px;
}
</style>

